<template>
	 <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="82px">
    	<el-form-item label="下游客户" prop='enterpriseId'>
	          <el-select v-model="queryParams.enterpriseId" :disabled='isDisabled'>
			     <el-option v-for='item in userList' :key='item.userId' :label="item.userName" :value="item.userId"></el-option>
			  </el-select>
		</el-form-item>
      <el-form-item label="运营商类型" prop="ispType">
        <el-select v-model="queryParams.ispType" placeholder="运营商类型">
			<el-option key="0" label="中国移动" value="移动"></el-option>
			<el-option key="1" label="中国联通" value="联通"></el-option>
			<el-option key="2" label="中国电信" value="电信"></el-option>
		</el-select>
      </el-form-item>
      <el-form-item label="套餐名称" prop="pricingName">
        <el-input
          v-model = 'queryParams.pricingName'
          placeholder="套餐名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" size="mini" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
     </el-form>
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-document-add"
          size="mini"
          v-hasPermi="['system:post:remove']"
          @click='addList'
        >新增</el-button>
      </el-col>
    </el-row>
    
     <el-table v-loading="loading" :data="tcList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="套餐编号" align="center" prop="pricingId" />
      <el-table-column label="套餐名称" align="center" prop="pricingName" />
      <el-table-column label="下级代理" align="center" prop="enterpriseName" />
	   <el-table-column label="状态" align="center" prop="status" > 
	  	<template slot-scope="scope">
          <el-tag v-if="scope.row.status=='0'">上架</el-tag>
          <el-tag type="success" v-if="scope.row.status=='1'">下架</el-tag>
        </template> 
        </el-table-column>
		<el-table-column label="销售价(元)" align="center" prop='sellAmt'>
			<template slot-scope="scope">
				<el-row>
					<el-col :span='12'><el-input v-model='scope.row.sellAmt'></el-input></el-col>
					<el-col :span='2'><el-button type='primary' @click='changePrice(scope.row.discountId,scope.row.sellAmt)'>修改</el-button></el-col>
				</el-row>
			</template>
		</el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click='editBtn(scope.row.discountId)'></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click='deleteBtn(scope.row.discountId)'></el-button>
        </template> 
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTcListFn"
    />
    
    <!-- 新增或者修改-->
	        <el-dialog title="新增销售价" :visible.sync="openTC" width="700px" :close-on-click-modal='false'>
    			<el-form ref="form" :rules='rules' :model="tcData" label-width="140px">
    				 <el-form-item label="下游客户" prop='enterpriseId'>
			          <el-select v-model="tcData.enterpriseId" :disabled='isDisabled' @change='chooseUserName'>
					     <el-option v-for='item in userList' :key='item.userId' :label="item.userName" :value="item.userId"></el-option>
					  </el-select>
			        </el-form-item>
			        
			        <el-form-item label="运营商" prop='ispType' v-show='!isEdit' :rules="!isEdit?rules.ispType:[{ required:false}]">
			          <el-select v-model="tcData.ispType" :disabled='isDisabled' @change='selectIspType'>
					     <el-option key="0" label="移动" value="移动"></el-option>
					     <el-option key="1" label="联通" value="联通"></el-option>
					     <el-option key="2" label="电信" value="电信"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="套餐名称" prop='pricingId' >
			          <el-select v-model="tcData.pricingId" :disabled='isDisabled' @change='choosePricingName'>
			          	<el-option v-for='item in taocanTypeListIstype' :key='item.pricingId' :label="item.pricingName" :value="item.pricingId"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="状态:" prop='status'>
			          <el-select v-model="tcData.status">
					     <el-option key="0" label="上架" value="0"></el-option>
					     <el-option key="1" label="下架" value="1"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="销售价(元)" prop='sellAmt'>
    				  <el-col :span='10'><el-input v-model="tcData.sellAmt" placeholder="" /></el-col>
			        </el-form-item>
			        <el-row><el-col :span='4' :offset='8'><el-button @click='addBtn' type="primary">确定</el-button></el-col><el-col :span='4'><el-button @click='cancle' type="">取消</el-button></el-col></el-row>
    			</el-form>
    		</el-dialog>
    </div>
</template>

<script>
	import {getAgentUser,getTcssList,getTcList,addTcssList,editTcssList,lookTcssListOne,getEnterpriseUser,deleteTcssList,selectListByispType} from "@/api/tczf/tc";
	export default{
		data(){
			return{
				queryParams:{
					pageNum:1,
					pageSize:10,
					ispType:null,   //运营商
					enterpriseId:null,   //用户列表ID
					pricingName:null  //套餐名称
					
				},
				single:'',
				multiple:'',
				tcList:[],
				total:0,  //总条数
				loading:false,
				openTC:false,    //修改套餐弹框
				taocanTypeList:[],   //套餐类型列表
				taocanTypeListIstype:[],   // 运营商不同的套餐类型列表
				isEdit:false,
				isDisabled:false,   //是否禁止弹框选择
				userList:[],   //下游用户列表
				tcData:{
					pricingId:null,  //套餐名称ID
					pricingName:null,  //套餐名称
					pricingType:null,  //套餐类型
					ispType:null,   //运营商
					status:'0',   //上下架
					sellAmt:null,   //销售价
					enterpriseId:null,//用户列表ID
					enterpriseName:null, //下游客户名字
					discountId:null  //每条的ID
				},
				rules:{
					 pricingId:[{ required: true,message: "套餐不能为空",trigger: "change" }],
					 enterpriseId:[{ required: true,message: "下游用户不能为空",trigger: "change" }],
					 sellAmt:[{ required: true,message: "销售价不能为空", trigger: "blur" }],
					 ispType:[{ required: true,message: "运营商不能为空", trigger: "change" }],
					 status:[{ required: true,message: "状态不能为空", trigger: "blur" }],
					 userId:[{ required: true,message: "下游客户不能为空", trigger: "change" }],
				}
			}
		},
		mounted(){
			this.getTcListFn();
			getTcList().then((res)=>{  //获取运营商类型
				this.taocanTypeList = res.rows;
				getEnterpriseUser().then((res)=>{  //获取下游客户列表
					this.userList = res.data;
					console.log(this.userList);
				})
			})
		},
		methods:{
			search(){  //搜索
				this.getTcListFn();
			},
			resetQuery(){//重置
				this.resetForm("queryForm");
				this.getTcListFn();
			},
			getTcListFn(){
				var queryParams = this.queryParams;
				console.log(queryParams)
				this.loading = true;
				getTcssList(queryParams).then((res)=>{
					console.log(res);
					this.tcList=res.rows;
					this.loading = false;
					this.total = res.total;
				})
			},
			chooseUserName(a){  //新增 选择下游客户
			var newuserList = this.userList.filter((item)=>{return item.userId==a});
			this.tcData.enterpriseName = newuserList[0].userName;
			console.log(this.tcData.enterpriseName )
			},
			choosePricingName(a){  // 新增 选套餐
				console.log(this.taocanTypeListIstype)
			var newtaocanTypeListIstype = this.taocanTypeListIstype.filter((item)=>{return item.pricingId==a});
			this.tcData.pricingName = newtaocanTypeListIstype[0].pricingName;
			this.tcData.pricingType = newtaocanTypeListIstype[0].pricingType;
			},
			addList(){  //增加按钮
				this.openTC = true;
				this.isEdit = false;
				this.isDisabled = false;
				this.tcData={
					pricingId:null,  //套餐名称ID
					ispType:null,   //运营商
					status:'0',   //上下架
					sellAmt:null,   //销售价
					enterpriseId:null,//用户列表ID
					discountId:null
				}
			},
			addBtn(){  //新增保存
				this.$refs["form"].validate(valid => {
			        if (valid) {
			        	 if(!this.isEdit){  //新增
				        	 	addTcssList(this.tcData).then((res)=>{
								if(res.code=='200'){
									console.log(res)
									this.$message({
							          message: '新增成功',
							          type: 'success'
							        });
							        this.getTcListFn();
							        this.openTC = false;
								}else{
									this.$message.error('新增失败');
								}
								})
			        	 }else{
			        	 	editTcssList(this.tcData).then((res)=>{
								if(res.code=='200'){
									console.log(res)
									this.$message({
							          message: '修改成功',
							          type: 'success'
							        });
							        this.getTcListFn();
							        this.openTC = false;
								}else{
									this.$message.error('修改失败');
								}
								})
			        	 }

			        }
			      })
			},
			cancle(){
				
				this.openTC = false;
			},
			editBtn(id){  //编辑按钮
				this.openTC = true;
				this.isEdit = true;
				this.isDisabled = true;
				console.log(id);
				lookTcssListOne(id).then((res)=>{
					console.log(res);
						this.tcData={
						pricingId:res.data.pricingId,  //套餐名称ID
						ispType:res.data.ispType,   //运营商
						status:JSON.stringify(res.data.status),   //上下架
						sellAmt:res.data.sellAmt,   //销售价
						enterpriseId:res.data.enterpriseId,//用户列表ID
						discountId:id
					}
						this.taocanTypeListIstype = [{pricingId:res.data.pricingId,pricingName:res.data.pricingName}];
						console.log(this.taocanTypeListIstype);
				})
			},
			deleteBtn(id){
				this.$confirm('确定删除该条吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
			        deleteTcssList(id).then((res)=>{
			    		console.log(res);
			    		if(res.code==200){
			    			this.$message({
					            type: 'success',
					            message: '删除成功!'
					          });
					          this.getTcListFn();
			    		}else{
			    			 this.$message.error('删除失败');
			    		}
			    	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
			},
			changePrice(id,price){//修改价格
				lookTcssListOne(id).then((res)=>{
						this.tcData={
						pricingId:res.data.pricingId,  //套餐名称ID
						ispType:res.data.ispType,   //运营商
						status:res.data.status,   //上下架
						sellAmt:price,   //销售价
						enterpriseId:res.data.enterpriseId,//用户列表ID
						discountId:id
					}
						
					editTcssList(this.tcData).then((res)=>{
							if(res.code=='200'){
								console.log(res)
								this.$message({
						          message: '修改成功',
						          type: 'success'
						        });
						        this.getTcListFn();
							}else{
								this.$message.error('修改失败');
							}
						})
				})
			},
			selectIspType(ispType){//选择厂商
				selectListByispType({ispType:ispType}).then((res)=>{
					this.taocanTypeListIstype = res.data;
				})
			},
			 // 多选框选中数据
		    handleSelectionChange(selection) {
		      //this.ids = selection.map(item => item.postId)
		      this.single = selection.length!=1
		      this.multiple = !selection.length
		    },
		}
	}
</script>

<style>
</style>